<template>
	<div class="padding-across-10">
		<div class="list">
			<p class="panel_title">区域列表</p>
			<el-tree :show-overflow-tooltip="true" style="height: 450px;overflow: auto;border: 0" ref="tree" :data="districtsDatas" :props="defaultProps" node-key="DistrictKeyId" :current-node-key="currentNodeKey" :highlight-current="true" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" @node-click="handleNodeClick">
			</el-tree>
		</div>
		<section id="right" v-loading="loading" element-loading-text="拼命加载中">
			<headerOpreate style="width: 100%;" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
			<div class="page-block">
				<div>
					<span><el-checkbox v-model="IsSelectedAll" @change="selectAll"></el-checkbox>&nbsp;全 选</span>
					<!--<i class="fa fa-circle" style="color: #FFC82B"></i>
					<span style="font-size: 16px">{{'开启('+oncount+')'}}</span>-->
					<i class="fa fa-circle" style="color:#13ce66"></i>
					<span style="font-size: 16px">{{'在线('+onlineTotal+')'}}</span>
					<i class="fa fa-circle" style="color: #999999"></i>
					<span style="font-size: 16px">{{'离线('+offlineTotal+')'}}</span>
				</div>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80, 100]" :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
			<div class="light-all">
				<div class="bg-purple">
					<el-row :gutter="10">
						<el-col :span="6" style="display: flex" v-for="item in projectorDatas">
							<div style="margin-top: 5px;" class="grid-content1 bg-purple" v-loading="item.Loading">
								<div class="detail-section2">
									<div class="section-top2">
										<div style="padding: 0 3px">
											<p style="width: 160px;float:left;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;" :title="item.name">{{item.name}}</p>
											<el-checkbox style="float: right;" :disabled="!item.online" v-model="item.IsSelected" @change="selectDevice(item)"></el-checkbox>
										</div>
									</div>
									<div class="section-bottom2">
										<div class="section-left3">
											<div>
												<i style="font-size: 60px;color: #13ce66" v-if="item.onoff" class="iconfont icon-touyingji light-on"></i>
												<i style="font-size: 60px;color: #999999" v-else class="iconfont icon-touyingji light-off"></i>
											</div>
										</div>
										<div class="section-right3" style="text-align: left;">
											<div>
												<el-tag v-if="item.online" type="success">在 线</el-tag>
												<el-tag v-else>离 线</el-tag>
											</div>
											<!-- <div style="padding-top: 10px">
												<el-switch :disabled="!item.online" v-model="item.onoff" on-color="#13ce66" :on-text="$t('message.on')" :off-text="$t('message.off')" @change="ControlProjector(item)">
												</el-switch>
											</div> -->
											<div>
												<span :title="item.sn" style="width: 100px;float:left;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 15px">设备码：{{item.sn}}</span>
											</div>
											<div>
												<span :title="item.districtName" style="width: 100px;float:left;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 15px">区域：{{item.districtName}}</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>

				<!--</template>-->
				<div style="text-align: center; color: #324157;">
					<h2 v-if="projectorDatas.length === 0">该区域暂无投影机/一体机设备</h2>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'

	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				projectors: [], //选中的设备数组
				IsSelectedAll: false, //是否全选
				controlResultDatas: [],
				loading: false,
				currentPage: 1,
				pageSize: 30,
				totalSize: 0,
				oncount: 0,
				onlineTotal: 0,
				offlineTotal: 0,
				districtsDatas: [],
				defaultExpandedKeys: [],
				currentNodeKey: '',
				districtForm: {
					// name:'',
					districtid: ''
				},
				projectorDatas: [],
				defaultProps: {
					children: 'Children',
					label: 'Name',
					id: 'Id'
				},
				currentNodeKey: null,
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				}, {
					show: true,
					size: "small",
					type: 'success',
					icon: 'el-icon-eleg-icon_check_alt el-icon--left',
					name: '一键开启',
					action: 'turnOnProjector'
				},
				{
					show: true,
					type: "danger",
					size: "small",
					icon: "el-icon-eleg-icon_close_alt el-icon--left",
					name: "一键关闭",
					action: "turnDownProjector"
				}
				],
			}
		},
		methods: {
			//选中全部设备
			selectAll() {
				if(this.IsSelectedAll) {
					clearInterval(this.ProjectorIntervalid);
				} else {
					this.ProjectorIntervalid = setInterval(() => {
						this.findDistrictDevices();
					}, 5000)
				}
				let vm = this;
				this.projectorDatas.forEach(function(item) {
					item.IsSelected = vm.IsSelectedAll;
				})
			},
			//获取选中的设备
			getSelectedLight() {
				this.projectors = [];
				let vm = this;
				this.projectorDatas.forEach(function(item) {
					if(item.IsSelected && item.online) {
						vm.projectors.push(item);
					}
				})
				//组建数据
				var selectProjector = [];
				for(var i = 0; i < this.projectors.length; i++) {
					selectProjector[i] = {};
					selectProjector[i].sn = this.projectors[i].sn;
					selectProjector[i].ids = [this.projectors[i].keyid];
				}
				return selectProjector;
			},
			selectDevice(row) {
				if(this.getSelectedLight().length > 0) {
					clearInterval(this.ProjectorIntervalid);
				} else {
					this.ProjectorIntervalid = setInterval(() => {
						this.findDistrictDevices();
					}, 5000)
				}
			},
			turnOnProjector() {
				if(this.getSelectedLight().length > 0) {
					clearInterval(this.ProjectorIntervalid);
					this.$confirm('此操作将开启所选设备，是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.loading = true;
						var param = {
							onoff: 1,
							UserId: parseInt(GloabFun.getKeyId()),
							content: this.getSelectedLight()
						}
						HttpServer.httpPost.call(this, '/Api/Peripheral/Projectors', param, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								if(response.data.response.length === 0) {
									this.$notify.error({
										title: '错误',
										message: '无响应',
										duration: 2500
									});
								}else {
									this.$notify({
										title: '成功',
										message: '操作成功',
										type: 'success',
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
							this.findDistrictDevices();
							this.ProjectorIntervalid = setInterval(() => {
								this.findDistrictDevices();
							}, 5000)
						})
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
						this.findDistrictDevices();
						this.ProjectorIntervalid = setInterval(() => {
							this.findDistrictDevices();
						}, 5000)
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '选择设备中无在线设备',
						type: 'warning',
						duration: 2500
					});
				}
			},
			turnDownProjector() {
				if(this.getSelectedLight().length > 0) {
					clearInterval(this.ProjectorIntervalid);
					this.$confirm('此操作将关闭所选设备，是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.loading = true;
						var param = {
							onoff: 0,
							UserId: parseInt(GloabFun.getKeyId()),
							content: this.getSelectedLight()
						}
						HttpServer.httpPost.call(this, '/Api/Peripheral/Projectors', param, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								if(response.data.response.length === 0) {
									this.$notify.error({
										title: '错误',
										message: '无响应',
										duration: 2500
									});
								}else {
									this.$notify({
										title: '成功',
										message: '操作成功',
										type: 'success',
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
							this.findDistrictDevices();
							this.ProjectorIntervalid = setInterval(() => {
								this.findDistrictDevices();
							}, 5000)
						})
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
						this.findDistrictDevices();
						this.ProjectorIntervalid = setInterval(() => {
							this.findDistrictDevices();
						}, 5000)
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '选择设备中无在线设备',
						type: 'warning',
						duration: 2500
					});
				}
			},
			ControlProjector(item) {
				clearInterval(this.ProjectorIntervalid);
				item.Loading = true;
				var param = {
					onoff: item.onoff ? 1 : 0,
					UserId: parseInt(GloabFun.getKeyId()),
					zigbee: [{
						sn: item.sn,
						type: item.type,
						zigbeeChild: [{
							id: item.keyid,
							endpoint: [item.endpoint]
						}]
					}]
				}
				HttpServer.httpPost.call(this, '/Api/Peripheral/ZigBeeBatchOp', param, function(response) {}, function(response) {
					item.Loading = false;
					if(response.data.code === 0) {
						this.$notify({
							title: '成功',
							message: '操作成功',
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.findDistrictDevices();
					this.ProjectorIntervalid = setInterval(() => {
						this.findDistrictDevices();
					}, 5000)
				})
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.findDistrictDevices();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.findDistrictDevices();
			},
			handleNodeClick(data) {
				// this.districtForm.name = data.Name;
				this.districtForm.districtid = data.DistrictKeyId;
				this.findDistrictDevices();
			},
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			findDistrictDevices() {
				this.IsSelectedAll = false;
				var params = {
					"userKeyId": parseInt(GloabFun.getKeyId()),
					"districtid": this.districtForm.districtid,
					"index": this.currentPage,
					"pagesize": this.pageSize,
					"isonline": 0,
					"model": []
				}
				HttpServer.httpPost.call(this, '/Api/District/GetProjectors', params, function(res) {}, function(res) {
					if(res.data.code === 0) {
						res.data.info.forEach(function(item) {
							item.IsSelected = false;
							item.Loading = false;
							item.onoff = item.onoff === 1 ? true : false;
						});
						this.projectorDatas = res.data.info;
						this.totalSize = res.data.totalcount;
						this.onlineTotal = res.data.onlinecount;
						this.offlineTotal = res.data.offlinecount;
						this.oncount = res.data.oncount;
					}
				});
			},
			reloadDatas() {
				this.loading = true;
				this.IsSelectedAll = false;
				var params = {
					"userKeyId": parseInt(GloabFun.getKeyId()),
					"districtid": this.districtForm.districtid,
					"index": this.currentPage,
					"pagesize": this.pageSize,
					"isonline": 0,
					"model": []
				}
				HttpServer.httpPost.call(this, '/Api/District/GetProjectors', params, function(res) {}, function(res) {
					this.loading = false;
					if(res.data.code === 0) {
						res.data.info.forEach(function(item) {
							item.IsSelected = false;
							item.Loading = false;
							item.onoff = item.onoff === 1 ? true : false;
						});
						this.projectorDatas = res.data.info;
						this.totalSize = res.data.totalcount;
						this.onlineTotal = res.data.onlinecount;
						this.offlineTotal = res.data.offlinecount;
						this.oncount = res.data.oncount;
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: res.data.msg,
							duration: 2500
						});
					}
				});
			},
			sortDatas(arr) {
				for(var i=0;i<arr.length;i++){
					for(var j = i + 1;j<arr.length;j++){
						if(arr[i].DistrictKeyId>arr[j].DistrictKeyId){
							var tmp = arr[i];
							arr[i] = arr[j];
							arr[j] = tmp;
						}
					}
				}
				return arr;
			},
			getDatas() {
				HttpServer.httpGet.call(this, '/Api/District/districtTree?uid=' + parseInt(GloabFun.getKeyId()), function(response) {}, function(response) {
					// console.log('获取当前用户的所有绑定区域信息',response)
					if(response.data.code === 0) {
						if(response.data.info.length > 0) {
							this.districtsDatas = this.sortDatas(response.data.info);
							this.defaultExpandedKeys.push(this.districtsDatas[0].DistrictKeyId);
							this.currentNodeKey = this.districtsDatas[0].DistrictKeyId;
							//默认查询第一个区域下的设备
							// this.districtForm.name = this.districtsDatas[0].Name;
							this.districtForm.districtid = this.districtsDatas[0].DistrictKeyId;
							this.findDistrictDevices();
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
		},
		created() {
			this.getDatas();
			this.ProjectorIntervalid = setInterval(() => {
				this.findDistrictDevices();
			}, 5000);
		},
		beforeDestroy() {
			clearInterval(this.ProjectorIntervalid);
		},
	}
</script>
<style scoped>
	@import '../../../../assets/css/ext-iconfont.css';
</style>
<style scoped>
	@import '../../../../assets/css/font_1226/iconfont.css';
</style>
<style scoped lang="less">
	@import url("../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css");
	.el-row {
		margin-bottom: 5px;
		.bg-purple {
			width: 100%;
			.detail-section2 {
				width: 100%;
				height: 120px;
				flex-direction: column;
				justify-content: space-around;
				.section-top2 {
					justify-content: space-around;
					text-align: center;
					padding-top: 2px;
					width: 100%;
					height: 25%;
					line-height: 25px;
				}
				.section-bottom2 {
					display: flex;
					justify-content: space-around;
					padding-top: 15px;
					height: 75%;
					.section-bottom3 {
						display: flex;
						justify-content: space-around;
						height: 100%;
						padding: 5px 5px;
						.section-left3 {
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							height: 100%;
							/*padding-top: 5px;*/
						}
						.section-right3 {
							text-align: left;
							flex-direction: column;
							justify-content: space-around;
							/*padding: 5px;*/
							height: 100%;
						}
					}
				}
			}
		}
	}
	
	.grid-content {
		border: 1px solid #FFFFFF;
		height: 400px;
	}
	
	.grid-content1 {
		box-shadow: 0 1px 4px #000;
		border-radius: 5px;
		margin-top: 1px;
		height: 100%;
	}
	
	.list {
		height: 500px;
		width: 16%;
		float: left;
		overflow: auto;
		margin-bottom: 10px;
		.panel_title {
			height: 28px;
			line-height: 28px;
			font-size: 15px;
			text-align: center;
			border: 1px solid #E0E0E0;
			border-radius: 5px;
			color: #fff;
			background-color: #324157;
		}
	}
	
	#right {
		box-sizing: border-box;
		float: right;
		width: 83%;
		.light-all {
			min-width: 750px;
			margin: 5px 0;
			border: 1px solid gray;
			padding: 10px;
		}
		.page-block {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	
	.light-border {
		width: 20%;
		display: inline-block;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	.light-card {
		min-width: 100px;
		max-width: 130px;
		background-color: #fff;
		box-shadow: 0 1px 4px #000;
		border-radius: 5px;
		padding: 2.5px 2.5px 5px;
		text-align: center;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		>p {
			padding: 0 5px;
			font-size: 0.9rem;
		}
		div:nth-of-type(1) {
			padding-right: 5px;
			text-align: right;
			font-size: 20px;
		}
		>div>i {
			cursor: pointer;
			color: #999999;
		}
		.light-button {
			background-color: #999999;
			width: 50%;
			margin: 0 auto 5px;
			padding: 5px;
			border-radius: 5px;
			cursor: pointer;
		}
		.online {
			background-color: #13CE66;
		}
		.selected {
			color: #13CE66;
		}
		.light-on {
			color: #FFC82B;
		}
		.light-off {
			color: white;
		}
		.dododo {
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	}
</style>